<template>
  <div class="tinymce-boxz">
    <Editor v-model="editorContent" :api-key="apiKey" :init="init" />
  </div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  name: 'index',
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  components: {
    Editor
  },
  data() {
    return {
      editorContent: this.content,
      apiKey: 'xu8o0fdcxt5m1svh75k5zvr8e794pn4rub6wfb3gzl9veyje',
      init: {
        language: 'zh_CN', //语言类型
        placeholder: '在这里输入文字', //textarea中的提示信息
        min_width: 320,
        min_height: 220,
        height: 500, //注：引入autoresize插件时，此属性失效
        resize: 'both', //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
        branding: false, //tiny技术支持信息是否显示
        // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
        // elementpath: false, //元素路径是否显示

        font_formats:
          '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', //字体样式
        plugins:
          'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave emoticons', //插件配置 axupimgs indent2em
        toolbar: [
          'fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | blockquote subscript superscript removeformat ',
          'styleselect formatselect fontselect fontsizeselect |  table image axupimgs media emoticons charmap hr pagebreak insertdatetime  selectall visualblocks searchreplace | code print preview | indent2em lineheight formatpainter'
        ], //工具栏配置，设为false则隐藏
        // menubar: "file edit my1", //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”

        // images_upload_url: 'http://127.0.0.1:8890/common/upload',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
        // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
        paste_data_images: true, //图片是否可粘贴
        images_upload_handler: function(blobInfo, success, failure) {
          var xhr, formData

          xhr = new XMLHttpRequest()
          xhr.withCredentials = false
          xhr.open('POST', 'http://127.0.0.1:8890/common/upload')

          xhr.onload = function() {
            var json
            if (xhr.status != 200) {
              failure('HTTP Error: ' + xhr.status)
              return
            }
            json = JSON.parse(xhr.responseText)
            json.location = json.data.url
            if (!json || typeof json.location != 'string') {
              failure('Invalid JSON: ' + xhr.responseText)
              return
            }
            success(json.data.url)
          }
          formData = new FormData()
          formData.append('file', blobInfo.blob(), blobInfo.filename())
          xhr.send(formData)
        }
      }
    }
  },
  watch:{
    content(newValue){
      this.editorContent = newValue
    },
    editorContent(newValue){
      this.$emit('input',newValue)
    }
  }
}
</script>

<style>
.tinymce-boxz > textarea {
  display: none;
}
</style>
<style>
.tox-tinymce-aux {
  z-index: 9999 !important;
}

.tinymce.ui.FloatPanel {
  z-index: 99;
}
</style>
